<template>
	<view>
		<view class="header">
			<view class="header-content">
				<image v-if="shopInfo&&shopInfo.logoUrl" :src="'http://media.ousukeji.com/'+shopInfo.logoUrl"
					class="img"></image>
				<image v-else src="" class="img"></image>
				<view class="userinfo" style="">
					<text style="margin-top: -30rpx;">{{shopInfo.phone}}</text>
					<view style="display: flex;align-items: center;margin-top: 10rpx;" @click="navJifen">
						<text>积分：</text>
						<text style="font-size: 38rpx;font-weight: bold;">{{shopInfo.integral}}</text>
						<image src="../../static/right.png" style="height: 30rpx;width:30rpx;margin-left: 10rpx;">
						</image>

					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" style="border-bottom: 1rpx solid #f1f1f1;" @click="navJifen">
				<view class="left">积分兑换列表</view>
				<view class="right">></view>
			</view>
			<view class="item" @click="upatePassword">
				<view class="left">修改密码</view>
				<view class="right">></view>
			</view>
		</view>

		<view class="loginout" @click="loginout">
			退出登录
		</view>


		<!-- 字体颜色模态框 start -->
		<view class="pupop" v-if="showPupop">
			<view class="content">
				<view class="pupop-header">
					<view>修改密码</view>
					<image src="../../static/close.png" style="height:50rpx;width: 50rpx;" @click="closePupop"></image>
				</view>

				<view class="pupop-body">

                    <view class="item" style="margin-top: 30rpx;">
                    	<view class="label">原始密码</view>
						<input class="input" v-model="resetPasswordForm.one" placeholder="请输入原始密码"/>
                    </view>
					<view class="item">
						<view class="label">修改秘密</view>
						<input class="input" v-model="resetPasswordForm.two" placeholder="请输入要修改的密码"/>
					</view>
					<view class="code-btn" @click="submitResetPassword">
						确定
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Http from '../../utils/http';
	const http = new Http()
	export default {
		data() {
			return {
				shopInfo: {},
				showPupop: false,
				resetPasswordForm:{
					one:"",
					two:""
				}
			}
		},
		onShow() {
			this.getShopInfo()
		},
		methods: {
			getShopInfo() {
				http.get(`admin/agentShop/getShopInfo`).then(res => {
					this.shopInfo = res.data.data
				})
			},
			loginout() {
				uni.removeStorageSync('token');
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			navJifen() {
				uni.navigateTo({
					url: "/pages/jifen/jifen"
				})
			},
			upatePassword() {
             this.showPupop = true
			},
			closePupop(){
				this.showPupop = false
				this.resetPasswordForm.one = ""
				this.resetPasswordForm.two = ""
			},
			submitResetPassword(){
				console.log(this.resetPasswordForm);
				
				http.post("admin/agentShop/resetPassword",this.resetPasswordForm).then(res=>{
					if(res.data.code !=200){
						return uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
					uni.showToast({
						title:"修改成功"
					})
					uni.removeStorageSync('token');
					uni.redirectTo({
						url: "/pages/login/login"
					})
					
					console.log(res);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}

	.header {
		padding: 30rpx;
		background-color: #3c96f3;
		color: #fff;
	}

	.header-content {
		padding: 15rpx;
		display: flex;
		align-items: center;

		.img {
			height: 130rpx;
			width: 130rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
		}

		.userinfo {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			font-size: 34rpx;
		}
	}

	.list {
		background: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin: 20rpx;

		.item {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 36rpx;
				color: #333;
			}

			.right {
				font-size: 38rpx;
				color: #666;
			}
		}
	}

	.loginout {
		height: 100rpx;
		line-height: 100rpx;
		margin: 30rpx;
		background: #fff;
		text-align: center;
		border-radius: 20rpx;
		margin-top: 30%;
	}

	.pupop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9;

		.content {
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			position: fixed;
			z-index: 19;
			height: 700rpx;
			bottom: 0;
			left: 0;
			right: 0;

			.pupop-header {
				display: flex;
				height: 100rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 0 30rpx;

			}

			.pupop-body {
				margin: 20rpx 30rpx;

				.item {
					display: flex;
					margin-top: 20rpx;
					height: 100rpx;
					align-items: center;
					.label{
						font-size: 32rpx;
						width: 130rpx;
						
					}
					.input {
						flex: 1;
						height: 70rpx;
						line-height: 70rpx;
						border: 1rpx solid #eee;
						margin: 0 20rpx;
						font-size: 30rpx;
						border-radius: 12rpx;
						text-indent: 12rpx;
					}

					.btn {
						height: 80rpx;
						width: 150rpx;
						background: #ff0000;
						color: #fff;
						border-radius: 16rpx;
						text-align: center;
						line-height: 80rpx;
						margin-left: 20rpx;
					}
				}

				.code-btn {
					height: 100rpx;
					line-height: 100rpx;
					margin: 30rpx;
					background: #ff0000;
					margin-top: 80rpx;
					border-radius: 50rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>